<template>
    <div class="mainDiv">
        <div class="rowHead">
            <el-button type="success" icon="plus" @click="add" v-qx="permission.addone">新增主分类</el-button>
        </div>
        <el-table :data="tableHost" :show-header="false" :row-key="getRowKeys" :expand-row-keys="expands" @expand-change="unfold" :row-class-name="tableRowClassName" height="100%">
            <el-table-column type="expand">
                <template slot-scope="scope">
                    <el-button size="small" icon="edit" class="mr" v-for="tablenext in tableNext" :key="tablenext.id" v-if="tablenext.pid === scope.row.id" @click="editcate($event,tablenext,2)">{{tablenext.name}}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="name" width="200"></el-table-column>
            <el-table-column></el-table-column>
            <el-table-column width="300">
                <template slot-scope="scope">
                    <el-button-group>
                        <el-tooltip content="新增二级分类" placement="left" :open-delay="800" v-qx="permission.addtwo">
                            <el-button type="success" size="small" icon="plus" @click="addcate($event,scope.row)">新增二级分类</el-button>
                        </el-tooltip>
                        <el-tooltip content="重命名当前主分类" placement="top" :open-delay="800" v-qx="permission.edit">
                            <el-button type="warning" size="small" icon="edit" @click="editcate($event,scope.row,1)">重命名当前主分类</el-button>
                        </el-tooltip>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import C from '@/common/common.js'
export default {
  name: 'categorylist',
  data () {
    return {
      tableHost: [],
      tableNext: [],
      expands: [],
      permission: {
        addone: 'category_addone',
        addtwo: 'category_addtwo',
        edit: 'category_edit'
      }
    }
  },
  mounted () {
    this.getmsg()
  },
  methods: {
    confirm (row, title, tips, msg) {
      this.$prompt(tips, title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[^\s]+.*[^\s]+$/,
        inputErrorMessage: '对不起，您输入的分类名称不正确'
      }).then(async ({ value }) => {
        row.name = value
        let res = await C.ajax('/organization/category/addedit', row, 'post')
        if (res) {
          this.getmsg()
          C.success(res.data)
        }
      })
    },
    add () {
      this.confirm({}, '新增项目主分类', '请输入需要新增项目主分类名称', '新增分类成功')
    },
    addcate (e, row) {
      this.confirm({ pid: row.id }, '新增“' + row.name + '”下次分类', '请输入需要新增项目分类名称', '新增分类成功')
      e.stopPropagation()
    },
    editcate (e, row, tp) {
      if (tp % 2) {
        this.confirm(row, '重命名项目主分类', '请输入主分类新名称', '更名成功')
        this.getmsg()
        // H.ajaxiframe('subjectcategory_editsubjectcategory.html',{id:id,name:name},400,164,'')
      } else {
        this.confirm(row, '重命名项目分类', '请输入分类新名称', '更名成功')
        this.getmsg()
        // H.ajaxiframe('subjectcategory_editsubjectcategory.html',{id:id,name:name},400,164,'重命名项目次分类')
      }
      e.stopPropagation()
    },
    async getmsg () {
      var that = this
      let data = await C.ajax('/organization/category/categorylist')
      if (data) {
        that.tableHost = data.p
        that.tableNext = data.c
        that.expands = JSON.parse(JSON.stringify(that.expands))
      }
    },
    // 获取row的key值
    getRowKeys (row) {
      return row.id
    },
    unfold (row, expanded) {
      this.expands = expanded.map(row => {
        return row.id
      })
    },
    tableRowClassName (row) {
      for (var i = 0; i < this.tableNext.length; i++) {
        if (this.tableNext[i].pid === row.row.id) {
          return 'xianshi'
        }
      }
    }
  }
}
</script>
<style>
.el-table__expanded-cell {
    padding: 15px;
}

.el-table__expand-icon {
    display: none;
}

.xianshi .el-table__expand-icon {
    display: block !important;
}
</style>